<template>
  <Main @create="create" button-text="下载">
    <template #search>
      <Form
        :form-data="formData"
        :control-list="controlList"
        @search="search"
      ></Form>
    </template>
    <template #table>
      <el-table
        :data="tableData"
        :border="true"
        v-loading="loading"
        height="100%"
      >
        <el-table-column
          v-for="tableColumn of tableColumnList"
          :key="tableColumn.uuid"
          :label="tableColumn.label"
          :prop="tableColumn.prop"
          :type="tableColumn.type"
          :width="tableColumn.width"
          header-align="center"
          align="center"
        >
          <template v-if="tableColumn.label === '任务内容'" #default="{ row }">
            <div>{{ row.content.slice(0, 10) + "..." }}</div>
          </template>
          <template v-if="tableColumn.label === '缴费图片'" #default="{ row }">
            <div style="display: flex; column-gap: 20px; overflow: auto">
              <div v-for="url of JSON.parse(row.attachment)" :keyt="url">
                <el-image
                  :src="url"
                  :preview-src-list="[url]"
                  style="width: 80px; height: 80px"
                ></el-image>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #pagination>
      <Pagination
        :pagination="pagination"
        @change="paginationChange"
      ></Pagination>
    </template>
  </Main>
</template>
<script>
import Main from "@/views/component/main/index.vue";
import Form from "@/views/component/form/index.vue";
import { getOwnerByAll } from "@/api/owner";
import Operate from "@/views/component/operate/index.vue";
import { getPayByPagination, getAllPayByFormdata } from "@/api/pay";
import { flushPage } from "@/utils/page";
import { showFlushNg } from "@/utils/message";
import Pagination from "@/views/component/pagination/index.vue";
import { download } from "@/api/download";
export default {
  name: "Pay",
  components: {
    Pagination,
    Operate,
    Form,
    Main,
  },
  beforeRouteEnter(to, from, next) {
    next(async (vm) => {
      await vm.getAllOwner();
      await vm.getPayByPagination();
    });
  },
  methods: {
    async paginationChange(currentPage) {
      this.pagination.currentPage = currentPage;
      await this.getPayByPagination();
    },
    async getPayByPagination() {
      try {
        this.loading = true;
        let result = await getPayByPagination({
          ...this.pagination,
          ...this.formData,
        });
        let tempTableData = result.data.list;
        tempTableData = tempTableData.map((pay) => {
          let owner = this.allOwner.find((owner) => {
            return owner.uuid === pay.ownerUuid;
          });
          return {
            ...pay,
            name: owner.name,
          };
        });
        this.tableData = tempTableData;
        this.pagination.total = result.data.total;
        await flushPage(
          this.tableData,
          this.pagination,
          this.getPayByPagination
        );
      } catch (error) {
        showFlushNg(error);
      } finally {
        this.loading = false;
      }
    },
    async getAllOwner() {
      let result = await getOwnerByAll();
      this.allOwner = result.data.list;
    },
    async create() {
      if (this.formData.ownerUuid.length === 0) {
        this.$message({
          message: "业主姓名未选择",
          type: "error",
        });
        return;
      }
      let allPayByFormdata = await getAllPayByFormdata({ ...this.formData });
      if (allPayByFormdata.data.list.length === 0) {
        this.$message({
          message: "未找到符合筛选项的任何缴费图片",
          type: "warning",
        });
        return;
      }
      let attachmentList = [];
      for (let i = 0; i < allPayByFormdata.data.list.length; i++) {
        let pay = allPayByFormdata.data.list[i];
        let payAttachmentList = JSON.parse(pay.attachment);
        for (let j = 0; j < payAttachmentList.length; j++) {
          let url = payAttachmentList[j];
          attachmentList.push(url);
        }
      }
      let owner = this.allOwner.find((owner) => {
        return owner.name === this.formData.name;
      });
      let sendDateRange = this.formData.sendDateRange;
      let dateTime = "";
      if (sendDateRange.length === 0) {
        dateTime = "";
      } else {
        let sendDateStart = sendDateRange[0].split(" ")[0];
        let sendDateEnd = sendDateRange[1].split(" ")[0];
        if (sendDateStart === sendDateEnd) {
          dateTime = `_${sendDateStart}`;
        } else {
          dateTime = `_${sendDateStart}~${sendDateEnd}`;
        }
      }
      await download({
        urlList: attachmentList,
        zipName: `${owner.name}${dateTime}`,
      });
    },
    async search() {
      await this.getPayByPagination();
    },
  },
  data() {
    return {
      loading: false,
      pagination: {
        pageSize: 5,
        currentPage: 1,
        total: 0,
      },
      allOwner: [],
      formData: {
        ownerUuid: "",
        name: "",
        sendDateRange: [],
      },
      tableData: [],
      tableColumnList: [
        {
          label: "序号",
          type: "index",
          width: "100px",
        },
        {
          label: "姓名",
          prop: "name",
          width: "100px",
        },
        {
          label: "上传时间",
          prop: "sendDatetime",
          width: "150px",
        },
        {
          label: "缴费图片",
          prop: "attachment",
        },
        {
          label: "操作时间",
          prop: "opDatetime",
          width: "150px",
        },
        {
          label: "主键",
          prop: "uuid",
          width: "300px",
        },
      ],
      controlList: [
        {
          type: "autocomplete",
          label: "姓名",
          prop: "name",
          clearable: true,
          change: (event) => {
            if (!event.value) {
              let owner = this.allOwner.find((owner) => {
                return owner.name === event;
              });
              if (!owner) {
                this.formData.name = event;
                this.formData.ownerUuid = "";
              } else {
                this.formData.name = owner.name;
                this.formData.ownerUuid = owner.uuid;
              }
            } else {
              this.formData.name = event?.name;
              this.formData.ownerUuid = event?.uuid;
            }
          },
          query: (queryString, cb) => {
            let tempOwnerList = this.allOwner.filter((owner) => {
              return owner.name.includes(queryString);
            });
            tempOwnerList = tempOwnerList.map((owner) => {
              return {
                ...owner,
                label: owner.name,
                value: owner.name,
              };
            });
            cb(tempOwnerList);
          },
          rule: [
            {
              trigger: ["blur", "change"],
              validator: (rule, value, callback) => {
                if (
                  this.formData.name.length > 0 &&
                  this.formData.ownerUuid.length === 0
                ) {
                  return callback("未找到业主");
                }
                return callback();
              },
            },
          ],
        },
        {
          type: "daterange",
          label: "上传时间",
          prop: "sendDateRange",
          clearable: true,
          change: (event) => {
            this.$nextTick(() => {
              this.formData.sendDateRange = event ?? [];
            });
          },
        },
      ],
    };
  },
};
</script>
